<template>
    <div id="app" class="rank-details">
        <scroll-fixed>
            <page-bar>
                <div slot="middle" class="header-middle">{{info.title}}</div>
                <div slot="right"></div>
            </page-bar>
        </scroll-fixed>
        <section class="list">
            <ul>
                <li v-for="item in lists" :class="item.rank==1 ? 'first' : (item.rank==2?'second':(item.rank==3?'third':'other'))">
                    <span class="rank" >{{item.rank}}</span>
                    <div class="info">
                        <span class="img"><img :src="item.head_img" alt=""></span>
                        <span class="name"> {{item.name}} </span>
                        <span class="score"> {{item.score}} </span>
                    </div>
                    
                </li>
            </ul>
        </section>
        <section class="no-msg" v-if="noMsg"></section>
    </div>
</template>

<script>
import scrollFixed from "../components/scrollFixed.vue";
import pageBar from "../components/pagebar.vue";
export default {
    name: "rank_details",
    components: {
        [scrollFixed.name]: scrollFixed,
        [pageBar.name]: pageBar
    },
    data() {
        return {
            hasMsg: true,
            lists: [],
            info:{},
            timeType: '',
            cl:"other",
            noMsg:false,
        };
    },
    mounted () {
        this.getDate();        
    },

    created () {


    },

    methods: {
        getDate () {
            let data = '';
            let that = this;
            var param = this.$utils.urlFactory.parse(location.search);
            
            console.log(param)
            this.$http.get('?ct=entertainment&ac=detail&channel_id='+param.id).then( res => {
                data = res.data;
                if (data.code === 0) {
                    that.info = data.data.info;
                    that.lists = data.data.rank_list;
                    if(that.lists.length==0){
                        that.noMsg = true;
                    }
                } else {
                    this.$toast(data.msg);
                }
            });
        }
    }
};
</script>

<style lang="less">
.rank-details {
    display: flex;
    flex-direction: column;
    .header-middle {
        font-size: 36px;
        color: #333;
    }
    .no-msg {
        border-top: 0.013333rem solid #eee;
        position: absolute;
        top: 1.093333rem;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff url('../assets/icon-no-message.png') no-repeat;
        background-size: 100% 25%;
        background-position-y: 25%;
    }
    .list {
        margin-top:30px;
        ul{
            li{
                display: flex;
                display: -webkit-flex;
                font-size:32px;
                background: #fff;
                align-items: center;
                padding:0 20px;
                color:#999999;
                span.rank{
                    margin-right:20px;
                }
                .info{
                    border-bottom:1px solid #e6e6e6;
                    flex: 1;
                    padding:30px 20px;
                    display: flex;
                    display: -webkit-flex;
                    align-items: center;
                    .img{
                        width:70px;
                        height:70px;
                        display: inline-block;
                        margin-right:20px;
                        img{
                            border-radius: 70px;
                            width:70px;
                            height:70px;
                        }
                    }
                    .score{
                        flex: 1;
                        text-align: right;
                    }
                    .name{
                        color:#292929;
                    }
                }
            }
            li:last-child .info{
                border-bottom:0;
            }
            li.first{
                .rank{
                    color:#fcd106;
                }
                .img{
                    width:105px;
                    height:110px;
                    background: url("../assets/first-bg.png") no-repeat left center;
                    background-size:100%;
                    position: relative;
                    img{
                        position: absolute;
                        bottom:4px;
                        right:4px;
                        width:88px;
                        height:88px;
                        border-radius: 88px;
                    }
                }
            }
            li.second{
                .rank{
                    color:#a8caff;
                }
                .img{
                    width:105px;
                    height:110px;
                    background: url("../assets/second-bg.png") no-repeat left center;
                    background-size:100%;
                    position: relative;
                    img{
                        position: absolute;
                        bottom:4px;
                        right:4px;
                        width:94px;
                        height:94px;
                        border-radius: 90px;

                    }
                }
            }
            li.third{
                .rank{
                    color:#f6a66e;
                }
                .img{
                    width:105px;
                    height:110px;
                    background: url("../assets/third-bg.png") no-repeat left center;
                    background-size:100%;
                    position: relative;
                    img{
                        position: absolute;
                        bottom:4px;
                        right:4px;
                        width:90px;
                        height:90px;
                        border-radius: 90px;
                    }
                }
            }
        }
    }
}
</style>


